<script setup>
import {ref} from "vue";
import "@/css/all.css"
//数据模型
const books = ref([
  {
    "bookId": 1,
    "type": "世界名著",
    "bookName": "红与黑",
    "author":"",
    "price":1,
    "truePrice":1,
    "publisher":"",
    "publishTime":"",
    "quantity":1,
    "description":"",
    "pictureBig":"",
    "pictureSmall":""
  }
])

//分页
import {useTokenStore} from "@/js/util/token"
import {PageService} from "@/js/api";
import {ElMessage} from "element-plus";
import router from "@/router";
//分页数据模型
const pagination = ref({
  currentPage: 1,//当前页码
  pageSize:4,//每页显示的记录数
  total:1,//总记录数
  category:useTokenStore().category,//图书种类
  bookName:useTokenStore().bookName//图书名称
})
//获取分页数据
const bookPage = async () => {
  if(useTokenStore().token){
    let result = await PageService(pagination);
    if(!result.data.flag)ElMessage.warning(result.data.msg)
    pagination.value.currentPage = result.data.data.current
    pagination.value.pageSize = result.data.data.size
    pagination.value.total = result.data.data.total
    books.value = result.data.data.records
  }

}
//切换页
const onCurrentChange = (currentPage) => {
  pagination.value.currentPage = currentPage
  bookPage()
}
//切换每页数据数量
const onSizeChange = (size) => {
  pagination.value.pageSize = size
  bookPage()
}
//跳转详情页
const toDescription = (bookId) => {
     useTokenStore().setBookId(bookId)
  if(useTokenStore().token){
    router.push("/description")
  }else{
    ElMessage.warning("请先登录!_!")
  }
}

//自动调用函数
bookPage()
</script>

<template>

<!--  全部商品-->
  <el-row>
    <el-col
        v-for="(book, key, index) in books"
        :key="key"
        :index="index"
        :value="book"
        :span="5"
        :offset="1"
    >
      <el-card :body-style="{ padding: '0px' }">
        <div style="width: 100%;min-width: 100%">
          <img :src="book.pictureBig"
               class="image"
               referrerpolicy="no-referrer"
          />
        </div>
        <div style="padding: 14px; flex: 1; display: flex;flex-flow: column">
          <div style="width: 100%;display: flex;justify-content: center;height: 50%;min-height: 50%">
            <span style="font-weight: bold;">{{ book.bookName }}</span>
          </div>
          <div class="bottom">
            <time class="time">{{ book.publisher }}</time>
            <el-button text class="button" @click="toDescription(book.bookId)"><el-icon><DArrowRight /></el-icon></el-button>
          </div>
        </div>
      </el-card>
    </el-col>
  </el-row>
  <div class="page" style="display: flex; justify-content: center; align-content: center;width: 100%">
    <el-pagination :model="pagination"
        @current-change="onCurrentChange"
        @size-change="onSizeChange"
                   :current-page="pagination.currentPage"
                   :page-sizes="[1,4,5,10,15]"
        :page-size="pagination.pageSize"
        background layout="jumper, total, sizes, prev, pager, next"
        :total="pagination.total" />
  </div>
</template>

